<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双十一倒计时</title>
    <style>
        #odiv {
            height: 200px;
            width: 300px;
            margin: 0 auto;
        }
        
        #box div {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid gray;
            margin: 0px 8px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(255, 145, 0);
        }
    </style>
    <script>
        window.onload = function() {
            var endTime = new Date(new Date().getFullYear() + '-11-11 00:00:00')

            var d = h = m = s = 0
            var dDiv = document.getElementById('d')
            var hDiv = document.getElementById('h')
            var mDiv = document.getElementById('m')
            var sDiv = document.getElementById('s')
            var id = setInterval(timing, 10)

            function timing() {
                var newTime = new Date()
                var seconds = parseInt((endTime.getTime() - newTime.getTime()) / 1000)
                if (seconds > 0) {
                    d = parseInt(seconds / 86400)
                    h = parseInt((seconds / 3600) % 24)
                    m = parseInt((seconds / 60) % 60)
                    s = parseInt(seconds % 60)
                } else {
                    clearInterval(id)
                }

                dDiv.innerHTML = (d < 10 ? '0' + d : d) + '天'
                hDiv.innerHTML = (h < 10 ? '0' + h : h) + '时'
                mDiv.innerHTML = (m < 10 ? '0' + m : m) + '分'
                sDiv.innerHTML = (s < 10 ? '0' + s : s) + '秒'
            }
        }
    </script>
</head>

<body>
    <div id="odiv">
        <h1>距离光棍节，还有</h1>
        <div id="box">
            <div id="d"></div>
            <div id="h"></div>
            <div id="m"></div>
            <div id="s"></div>
        </div>
    </div>
</body>

</html>